import React from "react";
import {Flex, Progress} from "antd";

interface IMyProgressProp {
  title: string
  percent: number
}

const MyProgress: React.FC<IMyProgressProp> = ({title, percent}) => {

  const conicColors = {'0%': '#87d068', '50%': '#ffe58f', '100%': '#ffccc7'};

  return (
    <Flex vertical align="center" justify="center" style={{width: 200, height: 250}}>
      <Progress percent={percent} strokeColor={conicColors} type="circle"/>
      <h3 style={{marginTop: 10, fontWeight: 800}}>{title}</h3>
    </Flex>
  )
}

export default MyProgress